<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
		  <u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view class="pagebgf" style="overflow: auto;" v-show="!loadingone">
			<navbar name="上传报告"></navbar>
			<view class="articleSteps">
				<u-steps :list="numList"
				 active-color="#FF930A"
				 un-active-color="#fff" 
				 :current="1"></u-steps>
			</view>
			<view class="hint-view">
				<view class="warningIcon">
				</view>
				<view class="hint-con">
					不清晰，请重新上传！
				</view>
				<view class="hint-hide">
				</view>
			</view>
			<block v-for="(item,idx) in physicalList" :key="idx">
				<view class="materia">
					<view class="flex-title">
						{{item.tl}}
					</view>
					<view class="flex-num" :class="item.name== 'time'?'optional':''">
						<input class="flex-input" type="text" :disabled="item.name== 'time'?true:false" :name="item.name"
							:value="item.tr" :placeholder="item.placeholder" @tap="clickInput(item.name)" />
					</view>
				</view>
				<u-line v-show="physicalList.length-1!=idx" />
			</block>
			<view class="uploadPictures">
				<view class="title">
					体检照片
				</view>
				<!-- <u-upload ref="uUpload" :action="action"  @on-remove="onRemove"></u-upload> -->
				<u-upload ref="uUpload" :action="action" :show-tips="false" @on-remove="onRemove" del-bg-color="#CCCCCC"
					:max-size="5 * 1024 * 1024" max-count="6" :auto-upload="false" :custom-btn="true">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<image class="slot-uimage"
							src="http://static.bsyjk.cn/camera/DD02D77EC0664EA5B49CDF143C5CAB5E.png"></image>
					</view>
				</u-upload>
				<view class="three">
					报告提交后需耐心等待三个工作日
				</view>
				<button class="submit-btn" @click="submit">提交</button>
			</view>
			<!-- 选择日期 -->
			<lb-picker ref="picker1" v-model="value1" mode="dateSelector" @change="handleChange" @confirm="handleConfirm"
				@cancel="handleCancel">
			</lb-picker>
		</view>
	</view>

</template>
<script>
import lbPicker  from '../../components/lb-picker/index';
import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLine from "@/uview-ui/components/u-line/u-line.vue"


import uUpload from "@/uview-ui/components/u-upload/u-upload.vue"
import uSteps from "@/uview-ui/components/u-steps/u-steps.vue"

	export default {
		components: {
			lbPicker,
			uLoading,
			uLine,
			uSteps,
			uUpload,
		},
		data() {
			return {
				loadingone:false,
				numList: [{
					name: '提交报告'
				}, {
					name: '解读中'
				}, {
					name: '已完成'
				} ],
				value1: '',
				label: '请选择时间',
				action: 'http://www.example.com/upload',
				physicalList: [{
						tl: '体检机构',
						name: 'organization',
						placeholder: '请填写机构',
						tr: ''
					},
					{
						tl: '体检时间',
						name: 'time',
						placeholder: '请选择时间',
						tr: ''
					},
					{
						tl: '体检原因',
						name: 'cause',
						placeholder: '请填写原因',
						tr: ''
					}
				],
			}
		},
		methods: {
			onRemove(index, lists) {
				console.log('图片已被移除')
			},
			clickInput(name) {
				if (name == 'time') {
					name = 'picker1'
				}
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				console.log(e)
			},
			handleCancel(e) {
				console.log('cancel::', e)
			}
		}
	}
</script>

<style lang="scss">
	.materia {
		display: flex;
		width: 750upx;
		height: 102upx;
		line-height: 102upx;
		padding: 0 27upx 0 24upx;
		font-size: 28upx;
		font-weight: 500;
		color: #333333;

		.flex-title {
			width: 40%;
		}

		.flex-num {
			width: 60%;

			.flex-input {
				height: 102upx;
				line-height: 102upx;
				text-align: right;
				font-size: 28upx;
				font-weight: 500;
				color: #333333;
			}
		}

		.optional {
			position: relative;
			padding-right: 40upx;
		}

		.optional:before {
			content: '';
			position: absolute;
			top: 30upx;
			right: 0upx;
			width: 30upx;
			height: 30upx;
			background: url(https://bsyjk-pic.bsyjk.cn/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
			background-size: 30upx 30upx;
		}
	}

	.uploadPictures {
		border-top: 30upx solid #f5f5f5;
		padding: 0 20upx;

		.title {
			height: 70upx;
			line-height: 70upx;
			font-size: 28upx;
			font-weight: 500;
			color: #333333;
		}

		.three {
			text-align: center;
			font-size: 30upx;
			font-weight: 500;
			color: #9B9B9B;
			line-height: 42px;
			margin: 300upx auto 0;
		}

		.submit-btn {
			width: 655upx;
			height: 90upx;
			background: #E2E1E2;
			border-radius: 45upx;
			font-size: 34upx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 90upx;
		}
	}

	.slot-btn {
		width: 200upx;
		height: 200upx;
		background: #F5F5F5;
		border-radius: 10upx;
		border: 1px solid #979797;
		text-align: center;
		line-height: 200upx;

		.slot-uimage {
			width: 64upx;
			height: 56upx;
		}
	}

	.articleSteps {
		width: 750upx;
		height: 142upx;
		padding: 30upx 0 0;
		background: url(https://bsyjk-pic.bsyjk.cn/toprbg/10099E8526734AC383D6ADEED897F016.png)no-repeat;
		background-size: 750upx 493upx;
	}
	.hint-view{
		width: 750upx;
		height: 72upx;
		background: #FDFCEC;
		position: relative;
		display: flex;
		padding:20upx 30upx;
		.warningIcon{
			width: 32upx;
			height: 32upx;
			background: url(http://static.bsyjk.cn/warningIcon/802EF69C27B1438093BF0F49ABE54F57.png)no-repeat;
			background-size:32upx 32upx;
		}
		.hint-con{
			font-size: 28upx;
			font-weight: 400;
			color: #F86E21;
			line-height: 30upx;
			padding-left: 20upx;
		}
		.hint-hide{
			width: 24upx;
			height: 24upx;
			background: url(http://static.bsyjk.cn/hideicon/07625D4787944B86A85AD5B1D467F75E.png)no-repeat;
			background-size: 24upx 24upx;
			position: absolute;
			right: 30upx;
		}
	}
</style>
